<template>
  <div>
    <el-dialog
      title="新增赠券任务"
      :visible="show"
      width="50%"
      @close="handleClose"
    >
      <div>
        <el-form
          ref="submitFormRef"
          :rules="rules"
          :model="submitForm"
          label-position="left"
        >
          <el-form-item label="押金金额" required prop="money">
            <div class="label-item">
              <el-input
                v-model="submitForm.money"
                :min="0.01"
                :max="999999.99"
                type="number"
                placeholder="请输入押金金额"
              >
                <template slot="append">元</template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label="首赠券" required prop="couponId">
            <div class="label-item">
              <div v-if="submitForm.couponId">
                <div>
                  {{ tempCouponDetail.couponName }}(面额：{{
                    tempCouponDetail.amount / 100
                  }}元，批次号：{{ tempCouponDetail.couponId }})
                </div>

                <el-button
                  type="text"
                  @click="$refs.dialogCardCouponTable.open()"
                >更改</el-button>
              </div>
              <el-button
                v-else
                type="text"
                @click="$refs.dialogCardCouponTable.open()"
              >选择</el-button>
            </div>
          </el-form-item>
        </el-form>
        <div class="app-main-tips-box">
          <div class="title">注：</div>
          <ul>
            <li>1.赠券任务创建后将不可修改、删除，请谨慎填写。</li>
            <li>
              2.所赠送的券若已过期、已终止、设置了领取限制，可能会导致券发放失败。
            </li>
          </ul>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <DialogCardCouponTable
      ref="dialogCardCouponTable"
      :has-checked-ids="hasCheckedIds"
      :card-coupon-type="['cash']"
      :multiple="false"
      @submit="handleChooseCoupon"
    />
  </div>
</template>

<script>
import DialogCardCouponTable from '@/components/DialogCardCouponTable'
import { addCouponGiftConfig } from '@/api/marketing'
export default {
  components: { DialogCardCouponTable },
  props: {
    show: Boolean
  },
  data() {
    const moneyRax = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入押金金额'))
      } else if (value < 0.01 || value > 999999.99) {
        callback(new Error('押金金额范围0.01-999999.99!'))
      } else if (value < 1) {
        if (String(value).length > 4) {
          return callback(new Error('押金金额不能超过2位小数'))
        }
        callback()
      } else {
        callback()
      }
    }
    return {
      rules: {
        couponId: [
          { required: true, message: '请选择首赠券', trigger: 'change' }
        ],
        money: [
          {
            required: true,
            message: '请输入押金金额',
            trigger: ['blur', 'change']
          },
          { validator: moneyRax, trigger: ['blur', 'change'] }
        ]
      },
      submitForm: {
        money: '',
        couponId: ''
      },
      tempCouponDetail: null
    }
  },
  computed: {
    hasCheckedIds({ submitForm }) {
      return [submitForm.couponId]
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.$nextTick(() => {
          this.submitForm = {
            money: '',
            couponId: ''
          }
          this.tempCouponDetail = null
        })
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:show', false)
    },
    handleChooseCoupon(e) {
      // if (e.length > 1) {
      //   this.$message.warning('只能选择一张券')
      //   return
      // }
      this.submitForm.couponId = e[0].couponId
      this.tempCouponDetail = e[0]
    },
    handleSubmit() {
      this.$refs.submitFormRef?.validate(async(valid) => {
        if (valid) {
          const { money } = this.submitForm
          const { couponName, couponId } = this.tempCouponDetail
          const params = {
            firstCouponPrototypeName: couponName,
            firstCouponPrototypeId: couponId,
            depAmt: Number(money) * 100
          }
          console.log('提交的订单', params)
          const res = await addCouponGiftConfig(params)
          if (res?.code === 0) {
            this.$message.success('新增成功')
            this.$emit('success')
            this.$emit('update:show', false)
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.label-item {
  display: flex;
  align-items: center;
  min-width: 400px;
}
/* 提示文本 */
.tips-text {
  color: $light-font-color;
  line-height: 1.7;
}
</style>
